{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        {% csrf_token %}
        <h2>服务器列表</h2>
        <a href="{% url 'server_add' %}" style="margin: 5px;" class="btn btn-light">添加服务器</a>
        <table class="table ">
            <thead>
                <tr>
                    <th>id</th>
                    <th>主机名</th>
                    <th>操作</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for item in queryset %}
                    <tr>
                        <td>{{ item.pk }}</td>
                        <td>{{ item.hostname }}</td>
                        <td><a href="{% url 'server_edit' pk=item.pk %}">编辑</a></td>
                        <td><a href="" onclick="removeRow(this,{{ item.pk }})">删除</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}
{% block js %}
    <script>
        function removeRow(ths,id) {
            let reslut=confirm('是否确定要删除？');
            if(reslut){
                $.ajax({
                    url:'/server/delete/'+id+'/',
                    data:{
                        csrfmiddlewaretoken:"{{ csrf_token }}",
                    },
                    type:'post',
                    success:function (arg) {
                         $(ths).parent().parent().remove();
                    }
                })

            }

        }
    </script>
{% endblock %}